<template>
	<!-- 精品路线商家首页 -->
	<view class="page_main">
	  <HeaderBar title="商家页面"></HeaderBar>
	  <view class="content">
		<wd-swiper :list="swiperImgList" autoplay v-model:current="current" value-key="imgUrl" height="312rpx" @click="handleClick" @change="onChange"></wd-swiper>
		<button class="btn" @click="goToCustomRoute">
		  <i class="iconfont icon-mti-huodongguiji"></i>
		  定制线路
		</button>
		<!-- 下拉菜单 -->
		<DropMenuGroup @checkSort="checkSort" @submitSelection="handleSubmitSelection"></DropMenuGroup>
		<!-- 商品列表 -->
		<ProductList :products="products" :hasMore="hasMore" @load-more="handleLoadMore"></ProductList>
	  </view>
	</view>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from "vue";
  import HeaderBar from "@/components/HeaderBar/index.vue";
  import DropMenuGroup from "@/premiumRouteSubPack/components/dropMenuGroup/index.vue";
  import ProductList from "@/premiumRouteSubPack/components/productList/index.vue";
  import { getByPage } from "@/premiumRouteSubPack/api/index";
  import {styleSettingContent} from "@/api/system";
  
  const current = ref(0);
  const swiperImgList = ref([]);
  
  // 分页查询参数
  const pageQuery = ref({
	pageNo: 1,
	pageSize: 10
  });
  
  // 产品筛选条件
  const productFilters = ref({
	sort: 0, // 默认升序
	travelDays: null, // 出行天数
	startThailDate: null, // 开始出发日期
	endThailDate: null, // 结束出发日期
	maxPrice: null, // 最高价
	minPrice: null, // 最低价
	tags: [] // 产品标签
  });
  
  // 封装请求参数
  const params = computed(() => ({
	...productFilters.value,
	pageNo: pageQuery.value.pageNo,
	pageSize: pageQuery.value.pageSize
  }));
  
  const products = ref([]);
  const hasMore = ref(true); // 是否还有更多数据
  
  onMounted(() => {
	getByPageInfo();
	getBanner();
  });
  
  // 调用后端接口
  const getByPageInfo = async () => {
	try {
	  const {result} = await getByPage(params.value);
	  if (result.length > 0) {
		products.value = [...products.value, ...result]; // 优化性能
		pageQuery.value.pageNo++;
	  }
	  if (result.length < pageQuery.value.pageSize) {
		hasMore.value = false;
	  }
	} catch (error) {
	  console.error("接口调用失败：", error);
	}
  };
  //查看更多
  const handleLoadMore = () => {
	if (hasMore.value) {
	  getByPageInfo();
	}
  };
  
  const checkSort = (sort) => {
	productFilters.value.sort = sort;
	resetQuery();
  };
  
  const handleSubmitSelection = (selectedValues) => {
	productFilters.value.travelDays = selectedValues.travelDays;
	if (selectedValues.dateRange && Array.isArray(selectedValues.dateRange)) {
        const startDate = selectedValues.dateRange[0];
        const endDate = selectedValues.dateRange[1] || selectedValues.dateRange[0];
        // 确保startDate和endDate是有效的日期
        if (!isNaN(startDate) && !isNaN(endDate)) {
            productFilters.value.startThailDate = timestampToDateTime(startDate);
            productFilters.value.endThailDate = timestampToDateTime(endDate);
        } else {
            // 如果日期无效，设置为空字符串
            productFilters.value.startThailDate = '';
            productFilters.value.endThailDate = '';
        }
    } else {
        // 如果日期范围为空，设置为空字符串
        productFilters.value.startThailDate = '';
        productFilters.value.endThailDate = '';
    }
	resetQuery();
  };
  
  const timestampToDateTime = (timestamp) => {
	const date = new Date(timestamp);
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, "0");
	const day = String(date.getDate()).padStart(2, "0");
	return `${year}-${month}-${day}`;
  };
  
  const handleClick = () => {
	console.log("点击banner");
  };
  
  const onChange = () => {
	console.log("切换banner");
  };
  
  const goToCustomRoute = () => {
	uni.navigateTo({
	  url: "/premiumRouteSubPack/pages/customizedRoute/index"
	});
  };
  
  const resetQuery = () => {
	pageQuery.value.pageNo = 1;
	products.value = [];
	getByPageInfo();
  };
  //获取精品路线二级页面banner
  const getBanner =async()=>{
	try{
		const res = await styleSettingContent({codes:"PREMIUM_ROUTE_BANNER"})
		const { PREMIUM_ROUTE_BANNER } = res.result
		swiperImgList.value = PREMIUM_ROUTE_BANNER
	}catch(error){

	}finally{}
  }
  </script>
  
  <style lang="scss" scoped>
  .page_main {
	min-height: 100vh;
	background: #EEEFE7;
	padding-bottom: 20rpx;
  }
  .content {
	padding: 0 26rpx;
  }
  :deep(.wd-swiper) {
	height: 312rpx;
	margin: 28rpx 0;
	border-radius: 10rpx;
  }
  .btn {
	background-color: #1B9C61;
	color: #fff;
	border-radius: 10rpx;
	height: 84rpx;
	font-size: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
  }
  .icon-mti-huodongguiji {
	font-size: 68rpx;
	color: #fff;
	margin-right: 10rpx;
  }
  </style>